<% content_for :head do %>
  <style>
@media screen and (min-width: 769px) {
	.demo-phone {
		display: none;
		height: auto;
	}
}

@media screen and (max-width: 768px) {
	.demo-video {
		display: none;
	}
}

.demo-phone {
   width: 363px;
   height: 726px;
}

.demo-container {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
}

.demo-video {
	opacity: 0.99;
	width: 100%;
}

.demo-button {
	animation: bounce 4s infinite;
	background-color: #489fe4;
	border: none;
	border-radius: 5px;
	bottom: 60px;
	box-shadow: 0 0 15px rgba(0,0,0,0.4);
	color: #fff;
	font-family: "Cabin", sans-serif;
	font-size: 25px;
	font-weight: bold;
	padding: 15px 30px;
	position: absolute;
}

.demo-options {
  position: absolute;
  bottom: 15px;
}

.demo-button:hover {
	background-color: #287dc1;
	cursor: pointer;
}

@-moz-keyframes bounce {
	10%, 26%, 40%, 0%, 50% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	20%, 21% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -8px, 0);
	}

	35% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -5px, 0);
	}

	45% {
		transform: translate3d(0, -2px, 0);
	}
}

@-webkit-keyframes bounce {
	10%, 26%, 40%, 0%, 50% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	20%, 21% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -8px, 0);
	}

	35% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -5px, 0);
	}

	45% {
		transform: translate3d(0, -2px, 0);
	}
}

@-o-keyframes bounce {
	10%, 26%, 40%, 0%, 50% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	20%, 21% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -8px, 0);
	}

	35% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -5px, 0);
	}

	45% {
		transform: translate3d(0, -2px, 0);
	}
}

@keyframes bounce {
	10%, 26%, 40%, 0%, 50% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	20%, 21% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -8px, 0);
	}

	35% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -5px, 0);
	}

	45% {
		transform: translate3d(0, -2px, 0);
	}
}
  </style>
<% end %>
